import Taro, { Component } from '@tarojs/taro'
import { Image, Text, View } from '@tarojs/components'
import './index.scss'
import classNames from 'classnames'
import {formatAmount, headImg} from '@/utils/utils'
import { toGoodsPage } from '@/utils/page_router'

interface IProps {
  onClose: Function //  取消事件
}

export default class ActivityGoods extends Component<IProps, {}> {
  props: any

  static options = {
    addGlobalClass: true
  }

  render() {
    const { isOpened, info={}, onClose } = this.props
    const prefixCls = 'activity-coupon'
    const bool = isOpened ? 'enter' : 'leave'
    // @ts-ignore
    return (<View className={prefixCls} catchtouchmove>
      <View className={`xf-overlay xf-fade-${bool}`} onClick={() => onClose()}/>
      <View className={classNames(`xf-modal xf-modal--bottom xf-slide-${bool} ${prefixCls}__popup`, {
        [`xf-modal--bottom-slide`]: !isOpened,
      })}>
        <Image src={`https://ui.aiyichuan.com/xcx_urm/img/home/host-sales_bg.png`} mode='widthFix' className={`${prefixCls}__bg`} onClick={() => toGoodsPage(info)}/>
        <View className={`${prefixCls}__goods`} onClick={() => toGoodsPage(info)}>
          <Image src={headImg(info.images)} className={`${prefixCls}__goods-img`}/>
          <View className={`${prefixCls}__goods-info d-f f-d-c j-c-b`}>
            <Text className={`${prefixCls}__goods-name t-o-e-2`}>{info.name}</Text>
            <View className='d-f a-i-b j-c-b bnn-number'>
              <View className={`${prefixCls}__goods-price`}>￥{formatAmount(info.salePrice)}</View>
              <View className={`${prefixCls}__goods-like`}>{info.id}人喜欢</View>
            </View>
          </View>
        </View>
        <View className={`${prefixCls}__buy-btn f-g-5`} onClick={() => toGoodsPage(info)}>立即抢购</View>
        <View className={`${prefixCls}__close-btn bnn-icon`} onClick={() => onClose()}>&#xe659;</View>
      </View>
    </View>)
  }
}
